<template>
	<popup v-model="show">
		<view class="pay-view" :style="{ '--fss': app.theme.fss() }">
			<view class="transverse-line flex">
				<view class="transverse-line-view"></view>
			</view>
			<view class="pay-layer">
				<view class="close iconfont icon-yuyinguanbi" @tap.stop="close"></view>
				<view class="head flex">
					<view class="h3">选择支付</view>
				</view>
				<view class="pay-group" v-if="info">
					<view class="item flex" v-if="info.payType.indexOf('w') !== -1" @tap="info.payTypeKey = 'w'">
						<view class="left flex">
							<image :src="pType.w"></image>
							<text>{{ app.util.deReplace("%E5%BE%AE123%E4%BF%A1") }}</text>
						</view>
						<image class="right" :class="info.payTypeKey === 'w' ? 'active' : ''" :src="`/static/img/${info.payTypeKey === 'w' ? 'select_green_active' : 'select_no'}.png`" mode="widthFix"></image>
					</view>
					<view class="item flex" v-if="info.payType.indexOf('a') !== -1" @tap="info.payTypeKey = 'a'">
						<view class="left flex">
							<image :src="pType.a"></image>
							<text>{{ app.util.deReplace("%E6%94%AF123%E4%BB%98123%E5%AE%9D123") }}</text>
						</view>
						<image class="right" :class="info.payTypeKey === 'a' ? 'active' : ''" :src="`/static/img/${info.payTypeKey === 'a' ? 'select_green_active' : 'select_no'}.png`" mode="widthFix"></image>
					</view>
				</view>
				<view class="pay-btn" @tap="sure" :style="{background : background}">确认支付</view>
			</view>
			<footer-bar></footer-bar>
		</view>
	</popup>
</template>

<script setup>
	import pType from "/static/js/libs/pType.js";
	import { ref, inject, defineProps, defineExpose } from "vue";
	const app = inject('app');
	
	/* props父组件传参区域 */
	// 接受props
	const prop = defineProps({
		
		// 按钮背景色
		background: {
			type: String,
			default: "#ffffff",
		},
		
	});
	
	
	/* 变量区域 */
	// 显示状态
	const show = ref(false);
	
	// 方式
	const info = ref(null);
	
	
	/* 方法区域 */
	// 确认按钮
	function sure() {
		if(info.value && info.value.success){
			info.value.success(info.value.payTypeKey);
		}
		close();
	}
	
	// 打开
	function open(e) {
		info.value && (e.payTypeKey = info.value.payTypeKey);
		info.value = e;
		show.value = true;
	}
	
	// 关闭
	function close() {
		show.value = false;
	}
	
	// 将方法抛出给父级组件使用
	defineExpose({ open, close });
</script>

<style scoped lang="scss">
	.pay-view {
		background: #25282E;
		border-radius: 15rpx 15rpx 0 0;
		width: 750rpx;
		padding-bottom: 20rpx;
		.close {
			position: absolute;
			right: 20rpx;
			top: 23rpx;
			font-size: calc(34rpx * var(--fss));
			width: 60rpx;
			line-height: 60rpx;
			text-align: center;
			color: rgba(255, 255, 255, 0.25);
		}
		.pay-layer {
			padding: 0 33rpx;
			.head {
				flex-direction: row;
				align-items: center;
				justify-content: center;
				.h3 {
					text-align: center;
					line-height: 1.55;
					font-size: calc(29rpx * var(--fss));
					color: rgba(255, 255, 255, 0.6);
				}
			}
			.pay-group {
				margin-top: 50rpx;
				.item {
					margin-bottom: 50rpx;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					&:nth-last-child(1) {
						margin-bottom: 0;
					}
					.left {
						flex-direction: row;
						align-items: center;
						image {
							width: 43rpx;
							height: 43rpx;
							margin-right: 22rpx;
							background: #FFF;
							border-radius: 50%;
						}
						text {
							font-size: calc(28rpx * var(--fss));
							color: rgba(255, 255, 255, 1);
						}
					}
					.right {
						width: 35rpx;
						height: 35rpx;
						opacity: 0.5;
						&.active {
							opacity: 1;
						}
					}
				}
			}
			.pay-btn {
				margin: 50rpx 0 10rpx 0;
				color: #000;
				text-align: center;
				font-size: calc(29rpx * var(--fss));
				font-weight: bold;
				line-height: 3;
				border-radius: 100rpx;
				transition: 0.2s all;
				&:active {
					opacity: 0.9;
				}
			}
		}
	}
</style>